<template>
  <div> 
    <div class="line1">
      <!--  多条件搜索 -->
      <div class="line1">
        <div class="line1">
          <el-input v-model="name" placeholder="请输入客户名称"></el-input>
          <div>
      <el-select v-model="sta" placeholder="请选择状态">
        <el-option
          label="已锁定"
          value="1">
        </el-option>
        <el-option
          label="未锁定"
          value="0">
        </el-option>
      </el-select>
    </div>
        </div>
        <div class="line1"> 
          <el-button type="primary" @click="search()">搜索</el-button>
        </div> 
        <div class="line1"> 
          <el-button class="el-icon-refresh" @click="refresh()"></el-button>
        </div> 
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="userName"
            label="客户名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="moneyType"
            label="费用类型"
            align="center">
          </el-table-column>
          <el-table-column
            prop="receivableMoney"
            label="应收金额"
            align="center">
           </el-table-column>
         <!-- <el-table-column
            prop="balance"
            label="可用余额"
            align="center">
          </el-table-column> -->
          <el-table-column
            prop="adminName"
            label="经办人"
            align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            prop="alock"
            label="状态"
            align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">已处理</div>
              <div v-if="scope.row.status == 1">待处理</div>
            </template>
          </el-table-column>
          <el-table-column
          v-if="(userAll.sid == 3 && (role.endsWith('m')) || role.endsWith('x')) || role == 'manager'"
            label="操作"
            width="240"
            align="center">
            <template slot-scope="scope">
              <!-- <el-button v-if="scope.row.status == 0 && scope.row.alock == 0" type="success">已处理</el-button> -->
              <el-button v-if="scope.row.status == 1  && scope.row.alock == 0" type="danger" @click="daichuli(scope.row.id)">处理</el-button>
              <el-button v-if="scope.row.alock == 0" class="el-icon-unlock" type="primary" @click="lock(scope.row.id)" circle></el-button>
              <el-button v-if="scope.row.alock == 1" class="el-icon-lock" type="danger" @click="unlock(scope.row.id)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页插件 -->
    <div class="block" style="margin: auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 20, 40]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
 export default{
  data(){
    return {
      tableData:[],
      page:1,
      size:5,
      total:0,
      name:'',
      sta:'',
      userAll:{},
      role:'',
      data:{
        userName:'',
        abc:'',
        page:0,
        size:0
      }
    }
  },
  methods:{
     //分页
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getRechargePageData()
    },
    handleCurrentChange(val) {//修改页码时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.page = val
      //发请求获取数据  调用方法
      this.getRechargePageData()
    },
    getRechargePageData: function(){
      if(this.data.userName == '' && this.data.abc == ''){
this.$axios.get("finance/findAccountManage/"+ this.page + "/"+ this.size).then(res => {
        console.log(res.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        })
      }else{
        this.$axios.post("finance/conditionsAccount",this.data).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.name=''
        this.sta=''
      })
      } 
    },
    //多条件查询
    search(){
      //封装数据
      this.data = {
        userName:this.name,
        abc:this.sta,
        page:1,
        size:this.size
      }
        console.log(this.data);
        this.getRechargePageData()
    },
    //刷新
    refresh(){
      this.page = 1
      this.getRechargePageData()
    },
    //处理账户订单
    daichuli(id){
      this.$axios.put("finance/updateMoney/"+id+"/"+this.page+"/"+this.size).then(res => {
        if(res.data.code == 200){
        this.tableData = res.data.data.records
        this.$message.success("操作成功")
      }else{
        this.$message.error("余额不足")
      }
      })
    },
   //lock
   lock(id){
    this.$axios.put("finance/lock/"+id+"/"+this.page+"/"+this.size).then(res => {
      if(res.data.code == 200){
        this.tableData = res.data.data.records
        this.$message.success("锁定成功")
      }
      else{
        this.$message.error("锁定失败")
      }
      })
   }, 
   //unlock
   unlock(id){
    this.$axios.put("finance/unlock/"+id+"/"+this.page+"/"+this.size).then(res => {
      if(res.data.code == 200){
        this.tableData = res.data.data.records
        this.$message.success("解锁成功")
      }
      else{
        this.$message.error("解锁失败")
      }
      })
   } 
  },
  mounted:function(){
    this.getRechargePageData()

    this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
        console.log(res.data.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
      });
  }
}
</script>
<style scoped>
.line1{
  display: flex;
}
</style>